<template>
  <section>
    <qd-img path="assets/img/01.png"></qd-img>
    <div class="login-form">
      <qd-field v-model="phone" placeholder="请输入手机号" icon="&#xe704;" :state="phoneState"></qd-field>
      <qd-field v-model="code" placeholder="请输入验证码" icon="&#xe73f;">
        <button v-show="!btninfo.lock" @click="getAuthCode" class="getCode" type="button">获取验证码</button>
        <button v-show="btninfo.lock" class="getCode forbid" type="button">{{btninfo.text}}s</button>
      </qd-field>
      <qd-button @click="submitForm" title="登 录" :class="`submitBtn ${phoneState == 'success' && code.length > 0 ? 'ok': null}`" style="margin-top: 2rem"></qd-button>
    </div>
  </section>
</template>

<script>
import QdImg from '@/components/bricksSon/Img'
import QdField from '@/components/bricksSon/Field'
import QdButton from '@/components/bricksSon/Button'
import qs from 'qs'
export default{
  components: {
    QdImg,
    QdField,
    QdButton
  },
  data () {
    return {
      phone: '',
      code: '',
      phoneState: '',
      btninfo: {
        lock: false,
        text: '获取验证码',
        counter: '',
        time: 60
      }
    }
  },
  watch: {
    phone () {
      if(this.phone == ''){
        this.phoneState = ''
      } else{
        let tel = /^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/;
        if(!tel.test(this.phone)) {
          this.phoneState = 'error'
        } else{
          this.phoneState = 'success'
        }
      }
    }
  },
  methods: {
    getAuthCode () {
      let result = {
        methodId: 'N002' + "",
        appid: 'h5',
        nonce: Math.random().toString(),
        timestamp: new Date().getTime().toString(),
        methodParam: {
          phone: this.phone
        }
      }
      this.axios.post('', result).then((res) => {
        console.log(res)
      }).catch((error) => {
        console.log(error)
      })
      this.btninfo.counter = setInterval(() => {
        this.btninfo.lock = true;
        this.btninfo.text = this.btninfo.time--
        if(this.btninfo.time < 0) {
          clearInterval(this.btninfo.counter)
          this.btninfo.text = '获取验证码'
          this.btninfo.time = 60
          this.btninfo.lock = false
        }
      }, 1000)
      this.$toast({
        message: '发送成功',
        position: 'bottom',
        className: 'istoast'
      });
    },
    submitForm () {
      if(this.phoneState == 'success' && this.code.length > 0){
        this.axios.post('', qs.stringify({
          methodId: '1004',
          data: {
            phone: this.phone,
            verifyCode: this.code,
            platform: ''
          }
        })).then((res) => {
          console.log(res)
        }).catch((error) => {
          console.log(error)
        })
      }
    }
  }
}
</script>

<style>
.login-form{
  margin-top: 2rem;
  padding: 0 1.5rem;
}
.getCode{
  background: none;
  padding: 0;
  font-size: .7rem;
  color: rgba(255, 121, 14, 1);
}
.forbid{
  color: #999999;
}
.istoast{
  background: rgba(0, 0, 0, .5)
}
.submitBtn{
  background: rgba(255, 121, 14, .3);
  transition: background .3s;
}
.submitBtn.ok{
  background: rgba(255, 121, 14, 1);
}
</style>
